<template>
  <div class="d-view">
       <div class="title">
        <span>{{ title }}</span>
        <title-decorate class="title-decorate" :row="4" :col="20" :diffRow="2" :diffCol="13"></title-decorate>
      </div>
      <ul class="list">
           <li @click="btnClick(1)" :class="{active:currentIndex==1}">
              <p class="pBox"> <img class="img" src="../../assets/image/switch.png"></p>
             <p class="tit"><i></i><span>工地数据屏</span></p>
           </li>
           <li @click="btnClick(2)" :class="{active:currentIndex==2}">
              <p class="pBox"> <img class="img" src="../../assets/image/switch.png"></p>
              <p class="tit"><i></i><span>工艺展示屏</span></p>
           </li>
           <li @click="btnClick(3)" :class="{active:currentIndex==3}">
              <p class="pBox"> <img class="img" src="../../assets/image/switch.png"></p>
              <p class="tit"><i></i><span>工地视频屏</span></p>
           </li>
      </ul>
      <div class="btn">
          <el-button>取消</el-button>
          <el-button type="primary">保存</el-button>
      </div>
  
  </div>
</template>

<script>
import TitleDecorate from "@/components/TitleDecorate";
export default {
  name: "App",
  components: {
    'title-decorate': TitleDecorate
  },
  mounted() {
 
  },
  data() {
    return {
      title: '东易日盛工地直播',
      currentIndex:1,
    }
  },
  methods: {
     btnClick(index){
      this.currentIndex=index
     },
 
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/base";

.d-view{
    padding: 24px 64px;
    position: relative;
  .title {
      color: $color-warning-400;
      font-size:35px;
      font-weight: bold;
      line-height: 1;
      display: flex;
      align-items: center;

      .title-decorate {
        margin-left: $spacing-base;

        ::v-deep.col {
          background: $color-alpha-warning-300-64;
        }
      }
    }
    .list{
        margin-left: -50px;
        margin-top: 74px;
        list-style: none;
       li{
         float: left; 
         width:calc(33.3% - 50px); 
         margin-left: 50px;
         height:400px;
         cursor: pointer;
         .pBox{
             width: 100%;
             height: calc(100% - 60px);
             border: 1px solid #4c83ad;
             .img{
                 width:100%;
                 height: 100%;
             }
         }
         .tit{
              height: 80px;
              line-height: 80px;
              text-align: center;
              font-size: 25px;
              color: #fff;
              position: relative;
 
              i{
                  width: 30px;
                  height: 30px;
                  background: #fff;
                  display: inline-block;
                  border-radius: 50px;
                  position: absolute;
                  top:23px;
              }
              span{
                  margin-left: 40px;
              }
         }
            &.active {
            i{
                background: #409eff;  
            } 
         }
       }  
    }
    .btn{
     position: absolute;
     bottom: 40px;
     right: 64px;
     .el-button{
        border-radius:35px;
        padding: 20px 40px;
        font-size: 20px;
     }

    }

   
}
</style>


 